<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Title</title>
<style type="text/css" media="screen">
#content {
	width: 960px;
	margin: 5px auto;
}

#left {
	background: #FFF;
	height: 160px;
	width: 320px;
	float: left;
}

#right {
	background: #FFF;
	height: 160px;
	width: 320px;
	float: right;
}

#center {
	background: #FFF;
	height: 160px;
	margin: 0px 320px;
}
</style>
<script type="text/javascript" src="../js/jquery.min.js"></script>

<script type="text/javascript" src="../js/highcharts.js"></script>

<script type="text/javascript" src="../js/modules/exporting.js"></script>

<script type="text/javascript">
	var chart1;
	$(document).ready(
			function() {
				chart1 = new Highcharts.Chart({
					chart : {
						renderTo : 'container1',
						defaultSeriesType : 'column',
						margin : [ 50, 50, 100, 80 ]
					},
					title : {
						text : '铺货'
					},
					xAxis : {
						categories : [ 'Product A', 'Product B', 'Product C',
								'Product D', 'Product E', 'Product F',
								'Product G', 'Product H', 'Product I'

						],
						labels : {
							rotation : -45,
							align : 'right',
							style : {
								font : 'normal 13px Verdana, sans-serif'
							}
						}
					},
					yAxis : {
						min : 0,
						title : {
							text : '产品铺货率(%)'
						}
					},
					legend : {
						enabled : false
					},
					tooltip : {
						formatter : function() {
							return '<b>' + this.x + '</b><br/>' + '产品铺货率: '
									+ Highcharts.numberFormat(this.y, 1) + '%';
						}
					},
					series : [ {
						name : 'Population',
						data : [ 50, 70, 89, 100, 80, 56, 89, 68, 66 ],
						dataLabels : {
							enabled : true,
							rotation : -90,
							color : '#FFFFFF',
							align : 'right',
							x : -3,
							y : 10,
							formatter : function() {
								return this.y;
							},
							style : {
								font : 'normal 13px Verdana, sans-serif'
							}
						}
					} ]
				});

			});

	var chart2;
	$(document).ready(
			function() {
				chart2 = new Highcharts.Chart({
					chart : {
						renderTo : 'container2',
						zoomType : 'xy'
					},
					title : {
						text : '排面数据'
					},
					subtitle : {
						text : '测试'
					},
					xAxis : [ {
						categories : [ 'Product A', 'Product B', 'Product C',
								'Product D', 'Product E', 'Product F',
								'Product G', 'Product H', 'Product I' ]
					} ],
					yAxis : [ { // Primary yAxis
						labels : {
							formatter : function() {
								return this.value;
							},
							style : {
								color : '#89A54E'
							}
						},
						title : {
							text : '品类平均排面',
							style : {
								color : '#89A54E'
							}
						},
						opposite : true

					}, { // Secondary yAxis
						gridLineWidth : 0,
						title : {
							text : 'SKU平均排面',
							style : {
								color : '#4572A7'
							}
						},
						labels : {
							formatter : function() {
								return this.value + ' ';
							},
							style : {
								color : '#4572A7'
							}
						}

					} ],
					tooltip : {
						formatter : function() {
							var unit = {
								'SKU平均排面' : '',
								'品类平均排面' : '',
							}[this.series.name];

							return '' + this.x + ': ' + this.y + ' ' + unit;
						}
					},
					legend : {
						layout : 'vertical',
						align : 'left',
						x : 120,
						verticalAlign : 'top',
						y : 80,
						floating : true,
						backgroundColor : '#FFFFFF'
					},
					series : [
							{
								name : 'SKU平均排面',
								color : '#4572A7',
								type : 'column',
								yAxis : 1,
								data : [ 49.9, 71.5, 106.4, 129.2, 144.0,
										176.0, 135.6, 148.5, 216.4 ]

							},
							{
								name : '品类平均排面',
								color : '#89A54E',
								type : 'spline',
								data : [ 7.0, 6.9, 9.5, 14.5, 18.2, 21.5, 25.2,
										26.5, 23.3 ]
							} ]
				});

			});

	var chart3;
	$(document).ready(
			function() {
				chart3 = new Highcharts.Chart({
					chart : {
						renderTo : 'container3',
						defaultSeriesType : 'scatter',
						zoomType : 'xy'
					},
					title : {
						text : '奶粉-米粉货架背个数'
					},
					subtitle : {
						text : 'demo'
					},
					xAxis : {
						title : {
							enabled : true,
							text : '米粉'
						},
						startOnTick : true,
						endOnTick : true,
						showLastLabel : true
					},
					yAxis : {
						title : {
							text : '奶粉'
						}
					},
					tooltip : {
						formatter : function() {
							return '米粉' + this.x + ' , 奶粉' + this.y + '';
						}
					},
					legend : {
						layout : 'vertical',
						align : 'left',
						verticalAlign : 'top',
						x : 100,
						y : 70,
						floating : true,
						backgroundColor : '#FFFFFF',
						borderWidth : 1
					},
					plotOptions : {
						scatter : {
							marker : {
								radius : 5,
								states : {
									hover : {
										enabled : true,
										lineColor : 'rgb(100,100,100)'
									}
								}
							},
							states : {
								hover : {
									marker : {
										enabled : false
									}
								}
							}
						}
					},
					series : [ {
						name : '零售点',
						color : 'rgba(119, 152, 191, .5)',
						data : [ [ 174.0, 65.6 ], [ 175.3, 71.8 ],
								[ 193.5, 80.7 ], [ 186.5, 72.6 ],
								[ 187.2, 78.8 ], [ 181.5, 74.8 ],
								[ 184.0, 86.4 ], [ 184.5, 78.4 ],
								[ 175.0, 62.0 ], [ 184.0, 81.6 ],
								[ 180.0, 76.6 ], [ 177.8, 83.6 ],
								[ 192.0, 90.0 ], [ 176.0, 74.6 ],
								[ 174.0, 71.0 ], [ 184.0, 79.6 ],
								[ 192.7, 93.8 ], [ 171.5, 70.0 ],
								[ 173.0, 72.4 ], [ 176.0, 85.9 ],
								[ 176.0, 78.8 ], [ 180.5, 77.8 ],
								[ 172.7, 66.2 ], [ 176.0, 86.4 ],
								[ 173.5, 81.8 ], [ 178.0, 89.6 ],
								[ 180.3, 82.8 ], [ 180.3, 76.4 ],
								[ 164.5, 63.2 ], [ 173.0, 60.9 ],
								[ 183.5, 74.8 ], [ 175.5, 70.0 ],
								[ 188.0, 72.4 ], [ 189.2, 84.1 ],
								[ 172.8, 69.1 ], [ 170.0, 59.5 ],
								[ 182.0, 67.2 ], [ 170.0, 61.3 ],
								[ 177.8, 68.6 ], [ 184.2, 80.1 ],
								[ 186.7, 87.8 ], [ 171.4, 84.7 ],
								[ 172.7, 73.4 ], [ 175.3, 72.1 ],
								[ 180.3, 82.6 ], [ 182.9, 88.7 ],
								[ 188.0, 84.1 ], [ 177.2, 94.1 ],
								[ 172.1, 74.9 ], [ 167.0, 59.1 ],
								[ 169.5, 75.6 ], [ 174.0, 86.2 ],
								[ 172.7, 75.3 ], [ 182.2, 87.1 ],
								[ 164.1, 55.2 ], [ 163.0, 57.0 ],
								[ 171.5, 61.4 ], [ 184.2, 76.8 ],
								[ 174.0, 86.8 ], [ 174.0, 72.2 ],
								[ 177.0, 71.6 ], [ 186.0, 84.8 ],
								[ 167.0, 68.2 ], [ 171.8, 66.1 ],
								[ 182.0, 72.0 ], [ 167.0, 64.6 ],
								[ 177.8, 74.8 ], [ 164.5, 70.0 ],
								[ 192.0, 101.6 ], [ 175.5, 63.2 ],
								[ 171.2, 79.1 ], [ 181.6, 78.9 ],
								[ 167.4, 67.7 ], [ 181.1, 66.0 ],
								[ 177.0, 68.2 ], [ 174.5, 63.9 ],
								[ 177.5, 72.0 ], [ 170.5, 56.8 ],
								[ 182.4, 74.5 ], [ 197.1, 90.9 ] ]

					} ]
				});

			});

	var chart4;
	$(document).ready(function() {
		chart4 = new Highcharts.Chart({
			chart : {
				renderTo : 'container4',
				plotBackgroundColor : null,
				plotBorderWidth : null,
				plotShadow : false
			},
			title : {
				text : '二次陈列比例'
			},
			tooltip : {
				formatter : function() {
					return '<b>' + this.point.name + '</b>: ' + this.y + ' %';
				}
			},
			plotOptions : {
				pie : {
					allowPointSelect : true,
					cursor : 'pointer',
					dataLabels : {
						enabled : false
					},
					showInLegend : true
				}
			},
			series : [ {
				type : 'pie',
				name : 'Browser share',
				data : [ [ '端架', 30.0 ], [ '包柱', 30.0 ], [ '堆头', 40.0 ] ]
			} ]
		});
	});

	var chart5;
	$(document).ready(
			function() {
				chart5 = new Highcharts.Chart({

					chart : {
						renderTo : 'container5',
						defaultSeriesType : 'column'
					},

					title : {
						text : '导购'
					},

					xAxis : {
						categories : [ '导购' ],
						labels : {
							rotation : -45,
							align : 'right',
							style : {
								font : 'normal 13px Verdana, sans-serif'
							}
						}
					},

					yAxis : {
						allowDecimals : false,
						min : 0,
						title : {
							text : '%'
						}
					},

					tooltip : {
						formatter : function() {
							return '<b>' + this.x + '</b><br/>'
									+ this.series.name + ': ' + this.y
									+ '<br/>' + 'Total: '
									+ this.point.stackTotal;
						}
					},

					plotOptions : {
						column : {
							stacking : 'normal'
						}
					},

					series : [ {
						name : '导购员',
						data : [ 20 ],
						stack : '导购'
					}, {
						name : '联系卡',
						data : [ 67.2 ],
						stack : '导购'
					} ]
				});

			});
	
	
	
	
	var chart6;
	$(document)
			.ready(
					function() {
						chart6 = new Highcharts.Chart(
								{

									chart : {
										renderTo : 'container6',
										defaultSeriesType : 'column'
									},

									title : {
										text : '价格促销'
									},

									xAxis : {
										categories : [	'Product A', 
														'Product B', 
														'Product C', 
														'Product D', 
														'Product E',
														'Product F',
														'Product G',
														'Product H',
														'Product I' ],
										labels : {
											rotation : -45,
											align : 'right',
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									},

									yAxis : {
										allowDecimals : false,
										min : 0,
										title : {
											text : '%'
										}
									},

									tooltip : {
										formatter : function() {
											return '<b>' + this.x + '</b><br/>'
													+ this.series.name + ': '
													+ this.y + '<br/>'
													+ 'Total: '
													+ this.point.stackTotal;
										}
									},

									plotOptions : {
										column : {
											stacking : 'normal'
										}
									},

									series : [
											{
												name : '百分比',
												data : [ 30, 20, 40, 50, 60,
														20, 15, 30, 30],
												stack : '价格促销'
											}]
								});

					});
	
	
	
	var chart7;
	$(document)
			.ready(
					function() {
						chart7 = new Highcharts.Chart(
								{

									chart : {
										renderTo : 'container7',
										defaultSeriesType : 'column'
									},

									title : {
										text : '赠品促销'
									},

									xAxis : {
										categories : [	'Product A', 
														'Product B', 
														'Product C', 
														'Product D', 
														'Product E',
														'Product F',
														'Product G',
														'Product H',
														'Product I' ],
										labels : {
											rotation : -45,
											align : 'right',
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									},

									yAxis : {
										allowDecimals : false,
										min : 0,
										title : {
											text : '%'
										}
									},

									tooltip : {
										formatter : function() {
											return '<b>' + this.x + '</b><br/>'
													+ this.series.name + ': '
													+ this.y + '<br/>'
													+ 'Total: '
													+ this.point.stackTotal;
										}
									},

									plotOptions : {
										column : {
											stacking : 'normal'
										}
									},

									series : [
											{
												name : '百分比',
												data : [ 30, 20, 40, 50, 60,
														20, 15, 30, 30],
												stack : '价格促销'
											}]
								});

					});
	
	
	
	var chart8;
	$(document)
			.ready(
					function() {
						chart8 = new Highcharts.Chart(
								{

									chart : {
										renderTo : 'container8',
										defaultSeriesType : 'column'
									},

									title : {
										text : 'POSM'
									},

									xAxis : {
										categories : [	'堆头  A', 
														'单页  B', 
														'单页 C', 
														'单页 D'
														],
										labels : {
											rotation : -45,
											align : 'right',
											style : {
												font : 'normal 13px Verdana, sans-serif'
											}
										}
									},

									yAxis : {
										allowDecimals : false,
										min : 0,
										title : {
											text : '%'
										}
									},

									tooltip : {
										formatter : function() {
											return '<b>' + this.x + '</b><br/>'
													+ this.series.name + ': '
													+ this.y + '<br/>'
													+ 'Total: '
													+ this.point.stackTotal;
										}
									},

									plotOptions : {
										column : {
											stacking : 'normal'
										}
									},

									series : [
											{
												name : '百分比',
												data : [ 30, 20, 40, 50],
												stack : '价格促销'
											}]
								});

					});
</script>
</head>

<body>


	<div align="center">
		<div
			style="width: 960px; height: 100px; background-image: url(../images/title.png)">
		</div>

		<div align="left" style="width: 960px">
			<p>
				<a href="../home.html">首页</a>&nbsp;&gt;&gt;&nbsp;核查概览
			</p>
		</div>


		<table width=100% border="0px">
			<tr>
				<td align="center">
					<table border="0px">
						<tr>
							<td width="320px">
								<div id="container1"
									style="width: 320px; height: 200px; margin: 0 auto"></div>
							</td>
							<td width="320px"><div id="container2"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
							<td width="320px"><div id="container3"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
						</tr>

						<tr>
							<td><div id="container4"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
							<td><div id="container5"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
							<td><div id="container6"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
						</tr>

						<tr>
							<td><div id="container7"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
							<td><div id="container8"
									style="width: 320px; height: 200px; margin: 0 auto"></div></td>
							<td></td>
						</tr>

					</table></td>
			</tr>
		</table>
	</div>
</body>
</html>
